作成したホームページの、メニューやバナーなどを目立たせて表示させたい…　という場合がありますよね。JAVAスクリプトを上手に利用すれば、画面をスクロールしても自分の好きな場所に、画像やメニューを固定させることができます。HTMLだけでは表現できなかったことも、一歩先行くJAVAスクリプトなら実現できるのです。特にJAVAスクリプトの知識が無くても、簡単に設定が可能なので、あなたのサイトを効果的に演出してみてはいかが？

→ JAVAスクリプトの準備をしよう
 
以下のJAVAスクリプトを、htmlの<head>〜</head>の中に丸々コピーして貼り付けます。
<head>
<script language="JavaScript"><!--
function ichikotei()//←※Ａ「ichikotei」は任意に変更可
{
sx = document.body.scrollLeft;
sy = document.body.scrollTop;
kotei.style.left= sx + 10;
//↑左側からの位置。※Ｂ「kotei」部分は任意に変更可
kotei.style.top = sy + 10;
//↑上側からの位置。※Ｂ「kotei」部分は任意に変更可
}
// --></script>
</head>
「左側からの位置」と「上側からの位置」の「10」の数値を変更させ、スクロール後の位置を設定します。 次にhtml内の<body>タグを探し「<body onScroll="ichikotei()">」と 変更。「ichikotei」部分は、上記スプリクト「※Ａ」と同じにします。これで、JAVAスクリプトの準備完了。


→ 文字列を固定してみよう
 
<head>〜</head>の間に、JAVAスクリプトをコピーしたら、次に位置固定させたい部分のタグを改造します。
<a href="index.htm"><font size="4">トップページに戻る</font></a>
上のようなリンクされた文字を固定する場合は。
<a href="index.htm" id="kotei" style="position:absolute;top:10px;left:10px;"><font size="4">トップページに戻る</font></a>
上のようにHTMLを変更します。「top:10px;left:10px」この「10」の数値は、スクロール前の位置になるので、前項で設定した、「スクロール後の位置」に合わせます。「id="kotei"」部分は、前項スクリプトの「※Ｂ」と同じにしますが、スタイルシートなどを利用している場合、「id」名が重ならないよう注意が必要。これで文字位置が固定されます。


→ メニューの表を固定させよう
 
さらに見栄えがするように、テーブルタグで作成したメニューを固定させてみましょう。基本的に前項と同じ要領です。
<table border="1">
<tr>
<td>各サービスガイド</td>
<td><a href="http://iswebmag.hp.infoseek.co.jp/sample011.html">副収入</a></td>
<td><a href="http://iswebmag.hp.infoseek.co.jp/sample012.html">掲示板</a></td>
<td><a href="http://iswebmag.hp.infoseek.co.jp/sample010.html">チャット</a></td>
</tr>
</table>
上のHTMLの1行目を「<table border="1" id="kotei" style="position:absolute;top:10px;left:10px;">」と変更します。これで、テーブルタグで作成した表全体が、画面左上に固定されます。


→ バナーを固定しよう
 
バナーなどの画像の位置を固定するのも、同じ要領になります。
<img src="banner.gif">
上のような画像の位置を固定する場合は
<img src="banner.gif" id="kotei" style="position:absolute;top:10px;left:10px;">
このように変更します。これで、バナー画像が画面左上に固定されます。


※ JAVAスクリプトを利用する際の注意点
  今回のJAVAスクリプトを利用した機能はどうでしたか？　思ったよりも簡単に設置できましたね。今回、紹介したJAVAスクリプトは、インターネットエクスプローラ(IE)のバージョン5以上での動作が確認されています。他のブラウザでもホームページが見られるように、JAVAスクリプトを利用しないメニューを別に設けると、アクセスする人にとってとても親切なページになるでしょう。ぜひ、がんばって一歩先行くホームページを作成してみてください！！  

�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��